import { reqAddHospitalSet, reqGetHospitalSetById, reqUpdateHospitalSet } from '@/api/hospital/hospitalSet';
import { Button, Card, Form, Input, Space, message } from 'antd'
import React, { useEffect, useState } from 'react'
import { useNavigate, useParams } from 'react-router-dom';

export default function AddOrUpdateHospital() {
  //获取 form 对象
  let [form] = Form.useForm();
  //获取当前的 id
  let { id } = useParams();
  //获取 navigate 函数
  let navigate = useNavigate();
  //表单提交时的处理
  let finish = async () => {
    //更新 loading 的状态
    setLoading(true);
    //获取表单的数据
    let data = form.getFieldsValue();
    try {
      if(id){
        //更新操作
        await reqUpdateHospitalSet({
          ...data,
          id: id
        });
        message.success('更新成功');
        //跳转
        navigate(-1);
      }else{
        //添加操作
        //调用函数发送请求
        await reqAddHospitalSet(data);
        //如果请求成功, 提示成功
        message.success('添加成功');
      }
      setLoading(false);
    } catch (e) {
      setLoading(false);
    }
  }

  //声明 loading 的状态
  let [loading, setLoading] = useState<boolean>(false);

  //页面加载完毕, 根据 URL 的 id 参数获取医院的信息
  useEffect(() => {
    let getHospital = async () => {
      //判断
      if (id) {
        //获取指定 id 的数据
        let result = await reqGetHospitalSetById(id);
        //将数据呈现在表单中
        form.setFieldsValue(result);
      }
    }
    getHospital();
  }, []);

  return (
    <Card>
      <Form
        form={form}
        name="basic"
        labelCol={{ span: 2 }}
        wrapperCol={{ span: 22 }}
        initialValues={{ remember: true }}
        autoComplete="off"
        onFinish={finish}
      >
        <Form.Item
          label="医院名称"
          name="hosname"
          rules={[{ required: true, message: '医院名称不能为空' }]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          label="医院编号"
          name="hoscode"
          rules={[{ required: true, message: '医院编号不能为空' }]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          label="API基础路径"
          name="apiUrl"
          rules={[{ required: true, message: 'apiUrl不能为空' }]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          label="联系人姓名"
          name="contactsName"
          rules={[{ required: true, message: '联系人姓名不能为空' }]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          label="联系人手机"
          name="contactsPhone"
          rules={[
            { required: true, message: '手机不能为空' },
            {
              pattern: /^1[3456789]\d{9}$/,
              message: '手机号码格式不正确',
            }
          ]}
        >
          <Input />
        </Form.Item>

        <Form.Item wrapperCol={{ offset: 2, span: 16 }}>
          <Space>
            <Button loading={loading} type="primary" htmlType="submit">
              {id ? '更新' : '新增'}
            </Button>
            <Button onClick={() => {
              navigate(-1);
            }}>
              返回
            </Button>
          </Space>
        </Form.Item>
      </Form>
    </Card>
  )
}
